import React, { useState } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'
export default function Header() {
    //让表单受控
    const [search, setSearch] = useState("")
    //将表单变化的结果，给到state
    const changeSearchHandle = (e) => {
        setSearch(e.target.value)
    }
    //按钮搜索，发送请求
    const searchHandle = async () => {
        //在拿到数据之前加载新的视图，将初始化状态改变并将搜索状态改变成true
        PubSub.publish('github',{isInit:false,isSearch:true,data:[]})
       const result =await axios.get('https://api.github.com/search/users?q=' + search);
        // console.log(result);
        //数据请求完成，将初始化状态与搜索中状态都改为false并携带请求回来的数据发布
        PubSub.publish('github',{isInit:false,isSearch:false,data:result.data.items})
    }
    return (
        <section className="jumbotron">
            <h3 className="jumbotron-heading">Search Github Users</h3>
            <div>
                <input type="text" onChange={changeSearchHandle} value={search} placeholder="enter the name you search" />&nbsp;
                <button onClick={searchHandle}>Search</button>
            </div>
        </section>
    )
}
